<template>
    <view class="page">
        <movable-area scale-area class="area" @click="onClickArea">
            <movable-view class="view" :style="{ height: viewHeight + 'px', width: viewWidth + 'px' }" inertia scale
                :scale-value="scaleValue" :x="x" :y="y" :scale-min="scaleMin" :direction="direction" @change="onChange"
                @scale="onScale" @click.stop="onclick">
                <!-- <view class="img_box"> -->
                <image id="img" @load="onLoadSuccess" :src="image" mode="widthFix"></image>
                <!-- </view> -->
                <!-- <view class="mask">
            <text>邢启政</text>
          </view> -->
            </movable-view>
        </movable-area>
        <view class="mask">
            <view class="watermark" v-for="(item, index) in watermarkList" :key="index"
                :style="{ left: item.left + 'px', top: item.top + 'px' }">
                <text>{{ userStore.user.nickname }}</text>
            </view>
        </view>
    </view>
</template>

<script lang="ts">
import { useUserStore } from '@/stores/user';

export default {
    components: {},
    data() {
        return {

            viewHeight: "auto",
            viewWidth: "auto",
            image: "",
            scaleValue: 1,
            imageHeight: '',
            imageWidth: '',
            initialScale: 1,
            scaleMin: 1,
            x: 0,
            y: 0,
            old: {
                x: 0,
                y: 0,
            },
            systemInfo: {},
            direction: "horizontal",
            watermarkList: []
        };
    },
    onLoad(options) {
        while (this.watermarkList.length < 100) {
            this.watermarkList.push({
                left: this.random(0, 56),
                top: this.random(48, 66),
            })
        }
        this.image = decodeURIComponent(options.img)
        // if (!this.$store.state.info.realName) {
        //     userInfo().then(res => {
        //         if (res.code != 0) {
        //             return;
        //         }
        //         this.$store.commit("setInfo", res.data);
        //     })
        // }
    },
    onReady() {
        uni.onWindowResize((res) => {
            console.log(res)
            this.handleScale(this.imageWidth, this.imageHeight)
        })
    },
    computed: {
        userStore() {
            return useUserStore().userInfos;
        }
    },
    methods: {
        random: function (start, stop) {
            return parseInt(Math.random() * (stop - start) + start);
        },
        onLoadSuccess(e) {
            this.imageHeight = e.detail.height
            this.imageWidth = e.detail.width
            this.handleScale(this.imageWidth, this.imageHeight)
        },
        handleScale(width, height) {
            this.systemInfo = uni.getSystemInfoSync()
            // this.viewHeight = height
            // this.viewWidth = width
            // 处理缩放误差
            const _scale = this.systemInfo.windowWidth / width
            this.scaleValue = Math.floor(_scale * 100) / 100
            this.viewWidth = width * (_scale / this.scaleValue)
            this.viewHeight = height * (_scale / this.scaleValue)
            // 处理缩放误差结束
            if (this.scaleValue < 0.5) {
                this.viewHeight = this.viewHeight / (0.5 / this.scaleValue)
                this.viewWidth = this.viewWidth / (0.5 / this.scaleValue)
                this.scaleValue = 0.5
            }
            this.initialScale = this.scaleValue
            this.scaleMin = this.scaleValue
            if (this.viewHeight * this.scaleValue > this.systemInfo.windowHeight) {
                this.direction = "all"
                // this.scaleMin = this.systemInfo.windowHeight/this.viewHeight
            } else {
                this.y = (this.systemInfo.windowHeight - (this.scaleValue * this.viewHeight)) / 2
            }
        },
        onclick(e) {
            return false
            // if(this.clicking){
            //   this.onDoubleClick(e)
            // }
            // this.clicking = true
            // setTimeout(()=>{
            //   this.clicking = false
            // }, 300)
        },
        onDoubleClick(e) {
            if (this.scaleValue === this.initialScale) {
                this.scaleValue = this.scaleValue * 2
            } else {
                this.scaleValue = this.initialScale
            }
            setTimeout(() => {
                if (this.scaleValueTemp) {
                    this.scaleValue = this.scaleValueTemp
                }
            }, 1000)
        },
        onClickArea(e) {
            uni.navigateBack()
        },
        onChange: function (e) {
            this.old.x = e.detail.x;
            this.old.y = e.detail.y;
        },
        onScale(e) {
            this.scaleValueTemp = e.detail.scale
            if (e.detail.scale * this.viewHeight > this.systemInfo.windowHeight) {
                this.direction = "all"
            } else {
                this.direction = "horizontal"
            }
        }
    },
};
</script>
  
<style scoped lang="scss">
.area {
    width: 100vw;
    height: 100vh;
    background-color: #000;
    overflow: hidden;

    .view {
        // width: 100%;
        // height: 100%;
        position: relative;

        .mask {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }

        image {
            width: 100%;
        }

        .img_box {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            image {
                width: 100%;
            }
        }
    }
}

.page {
    position: relative;
    overflow: hidden;

    .mask {
        position: absolute;
        left: -56rpx;
        top: -100rpx;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 9;
        opacity: 0.3;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .watermark {
            position: relative;
            display: inline-block;
            // margin-left: 24rpx;
            // margin-top: 24rpx;
            padding: 32rpx 24rpx;
            font-size: 32rpx;
            color: #cecece;
            transform: rotate(-32deg);
            // &:nth-child(2n+1){
            //   margin-top: 32rpx;
            //   margin-left: 12rpx;
            // }
            // &:nth-child(3n+1){
            //   margin-top: 28rpx;
            //   margin-left: 18rpx;
            // }
        }
    }
}
</style>